<template>
	<div id='tmpl'>
		<div id='cate'>
			<ul v-bind="{style:'width:'+ulwidth+'px'}">
				<li><a href="#">全部</a></li>
				<li v-for='item in cates'><a href="#">{{item.title}}</a></li>
			</ul>
		</div>
		<div id='imglist'>
			<ul>
			  <li v-for="item in list">
			  	<router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
			    <img v-lazy="item.img_url">
			    <div id='desc'>
			    	<h5 v-text='item.title'></h5>
			    	<p v-text='item.zhaiyao'></p>
			    </div>
				</router-link>
			  </li>
			</ul>			
		</div>
	</div>
</template>
<script>
	// import common from '../../kits/common.js'
	import {Toast} from 'mint-ui';
	export default{
		data(){
			return{
				ulwidth:375,
				cates:[
				{	
					'title':'广告摄影',
					},
					{
					'title':'摄影学习'
					},
					{
					'title':'摄影器材'
					},
					{
					'title':'明星写真'
					},
					{
					'title':'清纯甜美'
					},
					{
					'title':'古典美女'
					},
					{
					'title':'自然风景'
					},
					{
					'title':'空间设计'
				}],   // 用来储存图片分类数据的数组
				list:[
				{
					'id':1,
					'title':'颜值与战力的双重爆表道友请留步》金色变身',
					'img_url':'http://i2.img.969g.com/pub/imgx2018/06/22/503_120113_41e3b.jpg',
					'zhaiyao':'《道友请留步》即将于6月29日迎来不删档测试一周年庆典，倾情打造629道友节，疯狂让利，陪你狂欢一整夏！'
				},{
					'id':2,
					'title':'《山海异闻录》6职业深度揭秘 主角背景莫测',
					'img_url':'http://i2.img.969g.com/pub/imgx2018/06/22/503_115912_3c984.jpg',
					'zhaiyao':'盖娅互娱旗下首款以国学《山海经》为题材的3D国韵奇遇式手游《山海异闻录》现已全平台首发。'
				},{
					'id':3,
					'title':'《剑侠世界2》手游公测献礼 马天宇武侠MV花絮首曝',
					'img_url':'http://i3.img.969g.com/pub/imgx2018/06/22/503_124542_a7c81.jpg',
					'zhaiyao':'回眸惊鸿艳绝，少侠气宇轩昂。《剑侠世界2》手游代言人马天宇MV花絮今日首曝。'
				},
				]  //存储图片的数组
			}
		},
		created(){
			// 1.0 获取图片分类数据
			this.getcates(cateid);

			// 2.0 加载图片数据
			// var all=0;  //获取所有数据
			// this.getimages(all)
		},
		methods:{
			// 2.0 加载图片数据
			// getimages(cateid){
			// 	// 0.0 如果方法的cateid参数没有传递，则默认是0，代表获取所有图片数据
			// 	cateid=cateid || 0;
			// 	// 1.0 确定url
			// 	var url=common.apidomain+'/api/getimages/'+cateid;
			// 	// 2.0 ajax请求
			// 	this.$http.get(url).then(function(res){
			// 		var body=res.body;
			// 		if(body.status!=0){
			// 			Toast(res.body.message)
			// 			return
			// 		}
			// 		this.list=body.message;
			// 	})
			// },
			getcates(){
				// 确定url
				// var url=common.apidomain+'/api/geimgcategory';
				// 2.0 调用$http的get方法获取数据
				// this.$http.get(url).then(function(res){
				// 	if(res.body.status !=0){
				// 		Toast(res.body.messages);
				// 		return;
				// 	}


				// 	3.0 实现数据的赋值操作
				// 	this.cates=res.body.messages;
				// })

				// 4.0 实现当前分类数据所在的ul的总宽度=分类个数*每个分类数据的宽度
				var w=66;
				var count=this.cates.length+1;
				this.ulwidth=w*count;
			}
		}
	}
</script>
<style scoped>
	#cate{
		width:375px;
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul{
		margin:0;
		padding-left:0px;
	}
	#cate li{
		list-style:none;
		display: inline-block;
		font-size: 14px;
		color:rgb(38,162,255);
		padding-left:10px;
	}
	#cate a{
		color:rgb(38,162,255);
		cursor:pointer;
	}
	#imglist ul {
		padding-left:0;
	}
	#imglist li{
		list-style:none;
		position:relative;
	}
	#imglist img{
		width:100%;
	}
	#desc{
		width:100%;
		background-color:rgba(0,0,0,0.4);
		padding:5px 5px 0px 5px;
		position:absolute;
		bottom:5px;
		left:0;
	}
	#desc h5{
		color:#fff;
		font-weight:bold;
	}
	#desc p{
		color:#fff;
		font:12px;
		padding-top:3px;
	}
	image[lazy=loading] {
	  width: 40px;
	  height: 300px;
	  margin: auto;
	}
</style>